<template>
  <div class="column-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">Notifications</h1>
          <p class="page-subtitle">Follow high-quality columns to obtain series content</p>
        </div>
        <div class="header-right" v-if="userStore.isLoggedIn">
          <el-button type="primary" @click="showCreateDialog = true">
            <el-icon><Plus /></el-icon>
            Create a column
          </el-button>
        </div>
      </div>
    </div>

    <!-- 热门专栏 -->
    <div class="hot-columns-section" v-if="hotColumns.length > 0">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><TrendCharts /></el-icon>
          Popular Column
        </h2>
      </div>
      <div class="hot-columns-grid">
        <ColumnCard
          v-for="column in hotColumns"
          :key="column.id"
          :column="column"
          @click="handleColumnClick"
          @follow-change="handleFollowChange"
        />
      </div>
    </div>

    <!-- 专栏列表 -->
    <div class="columns-section">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><CollectionTag /></el-icon>
          All columns
        </h2>
        <div class="section-actions">
          <!-- 搜索框 -->
          <!-- <div class="search-container">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索专栏..."
              class="search-input"
              clearable
              @keyup.enter="handleSearch"
              @clear="handleClear"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button
              type="primary"
              @click="handleSearch"
              :loading="loading"
              class="search-btn"
            >
            Search
            </el-button>
          </div> -->

          <!-- 排序选择 -->
          <el-select
            v-model="sortType"
            placeholder="Sort by"
            class="sort-select"
            @change="handleSortChange"
          >
            <el-option label="Follow count Sort" :value="3" />
            <el-option label="Article count Sort" :value="4" />
            <el-option label="Newest Created" :value="2" />
            <el-option label="Oldest Created" :value="1" />
          </el-select>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <!-- 专栏网格 -->
      <div v-else-if="columns.length > 0" class="columns-grid">
        <ColumnCard
          v-for="column in columns"
          :key="column.id"
          :column="column"
          @click="handleColumnClick"
          @follow-change="handleFollowChange"
        />
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <el-empty
          :image-size="120"
          description="No column"
        >
          <template #image>
            <el-icon size="120" color="#d3d3d3"><Notebook /></el-icon>
          </template>
        </el-empty>
      </div>

      <!-- 分页 -->
      <div v-if="total > 0" class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :total="total"
          :page-sizes="[12, 24, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 创建专栏对话框 -->
    <CreateColumnDialog
      v-model="showCreateDialog"
      @success="handleCreateSuccess"
    />
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {CollectionTag, Notebook, Plus, Search, TrendCharts} from '@element-plus/icons-vue'
import ColumnCard from '@/components/ColumnCard.vue'
import CreateColumnDialog from './components/CreateColumnDialog.vue'
import {getColumnList, getHotColumns} from '@/api/column'
import {useUserStore} from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const searchKeyword = ref('')
const sortType = ref(3) // 默认关注数排序
const columns = ref([])
const hotColumns = ref([])
const total = ref(0)
const showCreateDialog = ref(false)

const pagination = reactive({
  pageNum: 1,
  pageSize: 24
})

// 生命周期
onMounted(() => {
  loadHotColumns()
  loadColumns()
})

// 方法
const loadHotColumns = async () => {
  try {
    const response = await getHotColumns(8)
    if (response.code === 200) {
      hotColumns.value = response.data || []
    }
  } catch (error) {
    console.error('获取热门专栏失败:', error)
  }
}

const loadColumns = async () => {
  loading.value = true
  try {
    const params = {
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize,
      sortType: sortType.value,
      keyword: searchKeyword.value.trim() || undefined
    }

    const response = await getColumnList(params)
    if (response.code === 200) {
      columns.value = response.data.data || []
      total.value = response.data.total || 0
    } else {
      ElMessage.error(response.message || '获取专栏列表失败')
    }
  } catch (error) {
    console.error('获取专栏列表失败:', error)
    ElMessage.error('获取专栏列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.pageNum = 1
  loadColumns()
}

const handleClear = () => {
  searchKeyword.value = ''
  pagination.pageNum = 1
  loadColumns()
}

const handleSortChange = () => {
  pagination.pageNum = 1
  loadColumns()
}

const handleColumnClick = (column) => {
  router.push(`/column/${column.id}`)
}

const handleFollowChange = (data) => {
  // 更新热门专栏中的关注状态
  const hotColumn = hotColumns.value.find(c => c.id === data.columnId)
  if (hotColumn) {
    hotColumn.isFollowed = data.isFollowed
  }
}

const handleCreateSuccess = () => {
  showCreateDialog.value = false
  loadColumns()
  loadHotColumns()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  loadColumns()
}

const handleCurrentChange = (page) => {
  pagination.pageNum = page
  loadColumns()
}
</script>

<style lang="scss" scoped>
.column-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .header-left {
    .page-title {
      font-size: 32px;
      font-weight: 700;
      color: $text-color;
      margin: 0 0 8px 0;
    }

    .page-subtitle {
      font-size: 16px;
      color: $text-secondary;
      margin: 0;
    }
  }
}

.hot-columns-section {
  margin-bottom: 48px;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 600;
      color: $text-color;
      margin: 0;

      .el-icon {
        color: $primary-color;
      }
    }
  }

  .hot-columns-grid {
    background: white;
    border-radius: 8px;
    border: 1px solid #dee0e1;
    overflow: hidden;
  }
}

.columns-section {
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 600;
      color: $text-color;
      margin: 0;

      .el-icon {
        color: $primary-color;
      }
    }

    .section-actions {
      display: flex;
      align-items: center;
      gap: 16px;

      .search-container {
        display: flex;
        align-items: center;
        gap: 8px;

        .search-input {
          width: 250px;
        }

        .search-btn {
          white-space: nowrap;
        }
      }

      .sort-select {
        width: 140px;
      }
    }
  }

  .loading-container {
    margin: 20px 0;
  }

  .columns-grid {
    background: white;
    border-radius: 8px;
    border: 1px solid #dee0e1;
    overflow: hidden;
    margin-bottom: 24px;
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .column-page {
    padding: 16px;
  }

  .page-header {
    .header-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    .header-left {
      .page-title {
        font-size: 24px;
      }
    }
  }

  .hot-columns-grid,
  .columns-grid {
    border-radius: 4px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;

    .section-actions {
      width: 100%;
      flex-direction: column;
      gap: 12px;

      .search-container {
        width: 100%;

        .search-input {
          flex: 1;
        }
      }

      .sort-select {
        width: 100%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.column-page {
  padding: 24px;
  text-align: center;
}

.page-header {
  margin-bottom: 40px;
  
  h1 {
    font-size: 32px;
    color: $text-color;
    margin-bottom: 8px;
  }
  
  p {
    color: $text-secondary;
    font-size: 16px;
  }
}

.coming-soon {
  background: $background-color;
  border-radius: $border-radius-large;
  padding: 60px 40px;
  box-shadow: $shadow-light;
  
  h2 {
    margin: 16px 0 8px;
    color: $text-color;
  }
  
  p {
    color: $text-secondary;
  }
}
</style>
